<template>
  <div class="breadcrumb-container">
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item 
        v-for="(item, index) in breadcrumbItems" 
        :key="item.path"
        :to="index < breadcrumbItems.length - 1 ? item.path : undefined"
        :class="{ 'is-last': index === breadcrumbItems.length - 1 }"
      >
        <el-icon v-if="item.icon" style="margin-right: 4px;">
          <component :is="item.icon" />
        </el-icon>
        {{ item.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import * as Icons from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const { t } = useI18n()

// 面包屑数据
const breadcrumbItems = computed(() => {
  const items = []
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  
  // 添加首页
  items.push({
    path: '/',
    title: t('breadcrumb.home'),
    icon: 'House'
  })
  
  // 添加路由匹配的页面
  matched.forEach(match => {
    if (match.path !== '/') {
      const title = match.meta?.title ? t(match.meta.title, match.meta.title) : match.name
      items.push({
        path: match.path,
        title: title,
        icon: match.meta?.icon
      })
    }
  })
  
  return items
})

// 图标组件
function IconComp(name) {
  if (!name) return null
  return Icons[name] || null
}
</script>

<style scoped>
.breadcrumb-container {
  padding: 12px 20px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  margin-bottom: 0;
}

.breadcrumb {
  font-size: 14px;
}

:deep(.el-breadcrumb__item) {
  display: flex;
  align-items: center;
}

:deep(.el-breadcrumb__item.is-last .el-breadcrumb__inner) {
  color: #606266;
  font-weight: 500;
}

:deep(.el-breadcrumb__item:not(.is-last) .el-breadcrumb__inner) {
  color: #409eff;
  cursor: pointer;
}

:deep(.el-breadcrumb__item:not(.is-last) .el-breadcrumb__inner:hover) {
  color: #66b1ff;
}

:deep(.el-breadcrumb__separator) {
  color: #c0c4cc;
  margin: 0 8px;
}
</style>

